<template>
  <view class="daily-affirmation-page" >
  <!-- <view class="daily-affirmation-page" :style="{backgroundImage:'url('+img+')'}"> -->
    <image class="bg-img" :src="img" mode="aspectFill" @load="imgLoadOk" @error="imgLoadError"></image>
    <template v-if="!isTypeSpecial">
      <view class="logo-wrapper">
        <image class="img" :src="logo" mode=""></image>
      </view>

      <view class="date-wrapper">
        <view class="year">{{year}}</view>
        <view class="date">{{date}}</view>
      </view>

      <view class="text-wrapper">
        <view class="main-box">
          <text class="text">{{text}}</text>
        </view>
        <view class="sub-box">
          <view class="icon">宜</view>
          <view class="sub-text-wrapper">
            <text class="text" v-for="(item,index) in subTextArr" :key="index">
              {{item}}
            </text>
          </view>
        </view>
      </view>
  </template>
    <view class="back-wrapper" @click="backHandle">
      <image class="img" :src="backIcon" mode=""></image>
      <text class="text">返回首页</text>
    </view>

    <view class="save-wrapper">
      <view class="btn-box" @click="saveHandle">
        保存
      </view>
    </view>



  </view>
</template>

<script>
  import {
    useDrawPoster
  } from '@/components/u-draw-poster'
  import {
    saveLocalImg
  } from '@/common/utils/util.js'
  import logoImg from '@/static/images/daily-company-logo.png'
  export default {
    props: {
      img: {
        type: String,
        default: ''
      },
      isTypeSpecial:{
        type:Boolean,
        default:false,
      },
      qrcode: {
        type: String,
        default: ''
      },
      bottomText: {
        type: String,
        default: ''
      },
      // logo: {
      //   type: String,
      //   default: ''
      // },
      year: {
        type: String,
        default: ''
      },
      date: {
        type: String,
        default: ''
      },
      text: {
        type: String,
        default: ''
      },
      subTextArr: {
        type: Array,
        default () {
          return []
        }
      },
      
    },
    mounted() {
      this.windowWidth = uni.getSystemInfoSync().screenWidth
      uni.showLoading()
    },
    data() {
      return {
        backIcon: this.imgBaseURL + '/daily/daily-page-back.png',
        downloadUrl: '',
        windowWidth: 0,
        logo:logoImg,
        isDownloadLoading:false
      }
    },
    methods: {
      imgLoadOk(){
        uni.hideLoading()
      },
      imgLoadError(){
        this.$showToast('图片加载失败')
        uni.hideLoading()
      },
      backHandle() {
        uni.navigateBack()
      },
      async saveHandle() {
        if(!this.isDownloadLoading){
          this.isDownloadLoading = true
          await this.createChipCanvas()
          saveLocalImg(this.downloadUrl,this.createCanvasImgCallback)
        }
      },
      createCanvasImgCallback(){
        this.isDownloadLoading = false
      },
      /**
       * 绘制海报
       */
      async createChipCanvas() {
        // 创建绘制工具
        const dp = await useDrawPoster({
          selector: 'dcanvas',
          loading: true,
          debug: true,
          width: 750,
          height: 1500
        })
        const w = dp.canvas.width
        const h = dp.canvas.height

        dp.draw(async (ctx) => {
          // 绘制背景图
          await ctx.drawImage(this.img, 0, 0, w, h)

          // 小程序二维码
          await ctx.drawRoundImage(this.qrcode, 325, 1330, 100, 100, 80)
          ctx.fillStyle = '#FFF'
          ctx.font = 'normal 24px PingFang SC'
          
          let textW = ctx.measureText(this.bottomText).width
          console.log(textW,'====textW')
          console.log((725 - textW) /2,'====325 - (textW/2)')
          ctx.fillText(this.bottomText, (725 - textW) /2, 1460)

        })

        dp.draw(async (ctx) => {
          // 公司logo
          await ctx.drawImage(this.logo, 30, 70, 178, 54)
        })

        if(!this.isTypeSpecial){
          
        

        //绘制文字内容
        dp.draw(async (ctx) => {
          ctx.fillStyle = '#FFF'
          ctx.font = 'bold 40px PingFang SC'
          let mText = this.year
          let textW = ctx.measureText(mText).width
          ctx.fillText(mText, w - (textW + 30), 142)

          ctx.font = 'bold 70px PingFang SC'
          mText = this.date
          textW = ctx.measureText(mText).width
          ctx.fillText(mText, w - (textW + 30), 212)
          
          var Point = function(x, y) {
            return {
              x: x,
              y: y
            };
          };



          function drawRoundedRect(rect, r, ctx) {
            var ptA = Point(rect.x + r, rect.y);
            var ptB = Point(rect.x + rect.width, rect.y);
            var ptC = Point(rect.x + rect.width, rect.y + rect.height);
            var ptD = Point(rect.x, rect.y + rect.height);
            var ptE = Point(rect.x, rect.y);

            ctx.beginPath();

            ctx.moveTo(ptA.x, ptA.y);
            // ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);
            ctx.lineTo(rect.x + rect.width, rect.y);
            ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);
            // ctx.arcTo(rect.x, rect.y, ptE.x, ptE.y, r);
            ctx.lineTo(rect.x, rect.y + rect.height);
            ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);

            ctx.fill();
          }

          function renderTextWithLineBreaks(text, x, y, maxWidth, context) {
            const words = text.split('')
            let line = ''
            let currentX = x
            let currentY = y
            let countLine = 1

            for (let i = 0; i < words.length; i++) {
              const testLine = line + words[i] + ''
              const metrics = context.measureText(words[i])
              currentX += metrics.width
              console.log(currentX, '====currentX')
              if (currentX > maxWidth && i > 0) {
                context.fillText(line, x, currentY)
                line = words[i] + ''
                countLine += 1
                console.log(metrics.actualBoundingBoxDescent, '=====ddmetrics.actualBoundingBoxDescent')
                console.log(metrics.actualBoundingBoxAscent, '=====ddmetrics.actualBoundingBoxAscent')
                currentY +=
                  40 //metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + (6 * countLine)
                currentX = x
              } else {
                line = testLine
              }
            }

            context.fillText(line, x, currentY);
            return currentY
          }

          function Rect(x, y, w, h) {
            return {
              x: x,
              y: y,
              width: w,
              height: h
            };
          }
          // var rect = Rect(30, 1000, 564, 17);

          let textMainY = 850
          ctx.font = '30px PingFang SC'
          ctx.fillStyle = '#FFFFFF'
          let maxY = renderTextWithLineBreaks(this.text, 54, textMainY, 438, ctx) + 30

          // var rect = Rect(30, 1000, 438, 176);
          var rect = Rect(30, textMainY-50, 438, maxY - textMainY + 50);
          ctx.fillStyle = 'rgba(78, 59, 32, 0.28)'
          drawRoundedRect(rect, 14, ctx);
          ctx.font = '30px PingFang SC'
          ctx.fillStyle = '#FFFFFF'
          renderTextWithLineBreaks(this.text, 54, textMainY, 438, ctx)

          // 设置矩形颜色
          ctx.fillStyle = 'rgba(78, 59, 32, 0.28)'
          
          
          let subTextWidth = ctx.measureText('宜').width
          for (var i = 0; i < this.subTextArr.length; i++) {
            let text = this.subTextArr[i]
            subTextWidth += ctx.measureText(text).width
          }
          
          // 进行绘制
          ctx.fillRoundRect(30, maxY + 20, subTextWidth+40, 44, 14);
          


          ctx.font = '26px PingFang SC'
          ctx.fillStyle = '#F44C6D'
          ctx.fillText('宜', 54, maxY + 50)


          ctx.lineWidth = 1; //设置线条宽度
          ctx.strokeStyle = '#FAF7F7'; //设置线条颜色


          ctx.fillStyle = '#FAF7F7'
          ctx.beginPath();
          ctx.moveTo(90, maxY + 28)
          ctx.lineTo(90, maxY + 57)
          ctx.closePath();
          ctx.stroke();

          ctx.font = '26px PingFang SC'
          ctx.fillStyle = '#ffffff'

          let xDDD = 98
          for (var i = 0; i < this.subTextArr.length; i++) {
            let text = this.subTextArr[i]

            ctx.fillText(text, xDDD, maxY + 50)
            xDDD += ctx.measureText(text).width + 10
          }

          


          ctx.clip()
        })
        }
        this.downloadUrl = await dp.create()
        console.log(this.downloadUrl, '---this.downloadUrl')
      },
    }
  }
</script>

<style lang="scss" scoped>
  .bg-img{
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .daily-affirmation-page {
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;

    background-size: cover;

    background-repeat: no-repeat;

    .logo-wrapper {
      position: fixed;
      top: 7vh;
      left: 30rpx;

      .img {
        width: 178rpx;
        height: 54rpx;
      }
    }

    .date-wrapper {
      position: fixed;
      right: 30rpx;
      top: 11vh;
      text-align: right;

      .year {
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 56rpx;
        letter-spacing: 2px;
        padding-right: 4rpx;
      }

      .date {
        margin-top: -8rpx;
        font-size: 70rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 98rpx;
        letter-spacing: 3px;
      }
    }


    .text-wrapper {
      position: fixed;
      bottom: 13vh;
      left: 30rpx;


      .main-box {
        background-color: rgba(78, 59, 32, 0.28);
        width: 438rpx;
        height: fit-content;
        padding: 14rpx 30rpx;
        font-size: 30rpx;
        font-family: PingFang-SC, PingFang-SC;
        // font-weight: 500;
        color: #FFFFFF;
        line-height: 50rpx;
        letter-spacing: 1px;
      }

      .sub-box {
        background-color: rgba(51, 46, 30, 0.2);
        font-size: 26rpx;
        font-family: PingFang-SC, PingFang-SC;
        // font-weight: 500;
        line-height: 37rpx;
        letter-spacing: 1px;
        margin-top: 10rpx;
        display: flex;
        column-gap: 10rpx;
        padding: 3rpx 6rpx;

        .icon {
          color: #F44C6D;
          height: fit-content;
          position: relative;

          padding-right: 14rpx;

          &::after {
            content: '';
            width: 1rpx;
            height: 27rpx;
            opacity: 0.53;
            border: 1rpx solid #FAF7F7;
            position: absolute;
            right: 0;
            top: 4rpx;
          }
        }

        .sub-text-wrapper {
          color: #FFFFFF;

          display: flex;
          column-gap: 6rpx;
        }
      }


    }

    .back-wrapper,
    .save-wrapper {
      position: fixed;
      bottom: calc(20rpx + constant(safe-area-inset-bottom));
      bottom: calc(20rpx + env(safe-area-inset-bottom));
    }

    .back-wrapper {
      left: 30rpx;
      display: flex;
      align-items: center;
      height: 58rpx;

      .img {
        width: 38rpx;
        height: 38rpx;
        margin-right: 8rpx;
      }

      .text {
        font-size: 26rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.84);
        line-height: 37rpx;
        letter-spacing: 1px;
      }
    }

    .save-wrapper {
      right: 30rpx;

      .btn-box {
        width: 190rpx;
        height: 58rpx;
        background: linear-gradient(180deg, #FFE8C7 0%, #F9C83E 100%);
        border-radius: 29rpx;
        text-align: center;
        line-height: 58rpx;

        font-size: 30rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #B68D2B;
        // line-height: 42rpx;
        letter-spacing: 1px;
      }
    }

  }
</style>